<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>5-4边框图像</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        div{
            width:500px;
            height:180px;
            padding: 40px;
            margin: 20px auto;
            border-style: solid;
            /*display: inline-block;*/
            background-color: skyblue;
            color: #fff;
            text-shadow: 1px 1px 2px black;
            font-family: 微软雅黑 ;
            font-weight: bold;
            vertical-align: top;
            background: linear-gradient(to bottom, #5964ae 0% , #557eff 25%, #f0d187 61.8%,#91a200 80%, green 95%);
            background-origin: border-box;
        }
        div code{
            display: block;
            font-weight: normal;
            text-shadow: none;
        }
        div:nth-child(1){
            border-image: url("borderImg.png") 20 / 20px;
        }
        div:nth-child(2){
            border-image: url("borderImg.png") 35 20 / 40px;
        }
        div:nth-child(3){
            border-image: url("borderImg.png") 20 / 10px 20px 30px 40px;;
        }
        div:nth-child(4){
            border-image: url("borderImg.png") 20 / 20px repeat;
        }
        div:nth-child(5){
            border-image: url("borderImg.png") 20 / 20px stretch repeat;
        }
    </style>
</head>
<body>
<h1>5-4边框图像</h1>
<h2><strong>这是边框图像样本</strong></h2>
<img src="borderImg.png" alt="边框图像样本">
<h3>下面是边框图像各种设置</h3>
<section id="borderImg">
    <div><code>url("borderImg.png") 20 / 20px;</code>斜线前面是四个边要裁取边框图像的宽度，后面是边框显示宽度</div>
    <div><code>url("borderImg.png") 35 20 / 40px;</code>斜线前面是上、右、下、左裁进去的深度，
        以此四条线分割原图像为9宫格，再将分得的四个边对于到边框，而裁得的角直接放到边框的角上</div>
    <div><code>url("borderImg.png") 20 / 10px 20px 30px 40px;</code>四个边显示不同的宽度</div>
    <div><code>url("borderImg.png") 20 / 20px repeat;</code>边框重复显示</div>
    <div><code>url("borderImg.png") 20 / 20px stretch repeat;</code>上下边框拉伸，左右边框重复</div>
</section>
</body>
</html>